<template>
<div class="shop-info"  v-if="Object.keys(shopinfo).length != 0">
  <div class="shop-logal" >
    <img :src="shopinfo.shopLogo" alt="">
    <div class="logal-name">{{shopinfo.name}}</div>
  </div>
  <div class="sell">
    <div class="data1">
      <div>{{shopinfo.cSells}}</div>
      <div>总销量</div>
    </div>
    <div class="data2">
      <div>{{shopinfo.cGoods}}</div>
      <div>全部宝贝</div>
    </div>
  </div>
  <hr>
  <div class="score"  >
    <div v-for="item in shopinfo.score">
      <span class="sp">{{item.name}}</span>
      <span id="score" class="sp">{{item.score}}</span>
      <span id="low-score" v-show="item.isBetter === false"class="sp">低</span>
      <span id="sup-score" v-show="item.isBetter === true" class="sp">高</span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "DetailShopinfo",
  props:{
    shopinfo:{
      type:Object,
      default () {
        return {
          lowprice:false,
          supprice:true
        }
      }
    },

  }   ,
  created () {
  },

  methods:{

  }

}

</script>

<style scoped>
.shop-info{
  font-size: 10px;
  position: relative;
  margin-top: 30px;
}

.shop-logal{
  display:flex;
  width: 120px;
  position: absolute;
  left: 10px;
  height: 50px;
}
.shop-logal img{
  width: 50px;

}
.logal-name{
  flex: 1;
  position: absolute;
  top:10px;
  left: 60px;
  display: inline;
}.sell{
   width: 200px;
   position: absolute;
   top:70px;
   left: 10px;
 }
.data1{
  text-align: center;
  width: 70px;

}

.data2{
  text-align: center;
  top:0;
  position: absolute;
  left: 80px;
}
hr{
  height: 100px;
  width: 0;
  border:1px whitesmoke solid;
  position: absolute;
  left: 165px;
  background-color: whitesmoke;
}
.score{
  position: absolute;
  top:52px;
  right: 30px;
}
#low-score{
  background-color: green;
  color: white;
}
#sup-score{
  background-color:#ff8198;
  color: white;
}
.sp{
  margin-right: 3px;
}

</style>